<template>
  <view class="container">
    <view :class="['ItemBox',showRadio?'ItemBoxalicen':'']">
      <radio v-if="showRadio" :checked="ticketsItem.goods_state" color="rgba(253, 211, 56, 1)"
        @click="radioClickHandler"></radio>
      <view class="ItemBox_image" @click="transShowClick">
        <image :src="ticketsItem.productImg" mode="aspectFill"></image>
      </view>
      <view class="ItemBox_content">
        <view class="ItemBox_content_top" @click="transShowClick">
          <h1>{{ticketsItem.productName}}</h1>
          <text v-if="!showRadio">{{ticketsItem.introduction}}</text>
        </view>
        <view class="ItemBox_content_bottom">
          <view class="ItemBox_content_bottom_title">
            <h1>¥{{ticketsItem.salePrice}}</h1>
            <text>¥{{ticketsItem.smarketPrice}}</text>
          </view>
          <tui-numberbox :value="showRadio?ticketsItem.goods_count:ticketsItem.specConfig" @change="changeItem"
            backgroundColor="transparent" color="rgba(61, 61, 61, 1)" iconSize="18">
          </tui-numberbox>
        </view>
      </view>
    </view>

    <!--uni-app-->
    <tui-popup :duration="500" :modeClass="mode" :styles="styles" :show="transShow">
      <view class="tui-text">
        <view class="tui-text-box">
          <swiper class="tui-text-box-swiper" indicator-dots indicator-color="rgba(61, 61, 61, 0.6)"
            indicator-active-color="rgba(61, 61, 61, 0.9)" circular autoplay interval="2500">
            <block v-if="ticketsItem.sliderImgs.length > 0">
              <block v-for="(item,i) in ticketsItem.sliderImgs" :key="i">
                <swiper-item class="tui-text-box-Item">
                  <image :src="item" mode="aspectFill"></image>
                </swiper-item>
              </block>
            </block>
          </swiper>
          <view class="tui-text-box-abso">
            <image src="/static/share2.png" mode="aspectFill" class="minImage" @click="popupShow"></image>
            <image src="/static/close.png" mode="aspectFill" class="minImage1" @click.stop="changeShow"></image>
          </view>
          <view class="tui-text-box-title">
            <h1 class="tui-text-box-title-h1">{{ticketsItem.productName}}</h1>
            <text class="tui-text-box-title-text">{{ticketsItem.introduction?ticketsItem.introduction:'未知'}}</text>
            <view class="tui-text-box-title-yi">
              已售：{{ticketsItem.virtualSales}}
            </view>

            <view class="tui-text-box-title-select">
              <h1 style="font-size: 26rpx;">¥<text
                  style="color: rgba(61, 61, 61, 1);font-size: 36rpx;font-weight: 500;">{{ticketsItem.salePrice}}</text>
              </h1>
              <tui-numberbox :value="tuiValue" :min="1" @change="changeList" backgroundColor="transparent"
                color="rgba(61, 61, 61, 1)" iconSize="18"></tui-numberbox>
            </view>
            <view class="tui-text-box-title-btn" @click="addToCartoneClick">
              <view class="tui-text-box-title-btn-box">
                加入购物袋
              </view>
            </view>
          </view>
        </view>
      </view>
    </tui-popup>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    name: "tickets_Item",
    data() {
      return {
        // value: 0,
        tuiValue: 1,
        transShow: false,
        mode: ['fade'],
        styles: {
          position: 'fixed',
          bottom: 0,
          top: 0,
          left: 0,
          right: 0,
          display: 'flex',
          'justify-content': 'center',
          'align-items': 'center'
        },
        styles1: {
          position: 'fixed',
          bottom: 0,
          top: 0,
          left: 0,
          right: 0,
          display: 'flex',
          'justify-content': 'center',
          'align-items': 'center'
        }
      };
    },
    computed: {
      ...mapState('m_cart', ['cart']),
    },
    props: {
      ticketsItem: {
        type: [Array, Object],
        default: {},
      },
      // 是否展示图片左侧的 radio
      showRadio: {
        type: Boolean,
        // 如果外界没有指定 show-radio 属性的值，则默认不展示 radio 组件
        default: false,
      },
      // 是否展示图片左侧的 radio
      redioShow: {
        type: Boolean,
        // 如果外界没有指定 show-radio 属性的值，则默认不展示 radio 组件
        default: false,
      }
    },

    methods: {
      ...mapMutations('m_cart', ['addToCart', 'updateGoodsState', 'addToCartone']),
      changeItem(e) {
        // console.log(e)
        // this.value = e.value
        this.$emit('numberChange', {
          // 商品的 Id
          id: this.ticketsItem.id,
          // 商品最新的勾选状态
          goods_count: e.value
        })
        // 2. 组织一个商品的信息对象
        const goods = {
          id: this.ticketsItem.id, // 商品的Id
          productName: this.ticketsItem.productName, // 商品的名称
          salePrice: this.ticketsItem.salePrice, // 商品的价格
          smarketPrice: this.ticketsItem.smarketPrice, // 商品原价
          goods_count: e.value,
          productImg: this.ticketsItem.productImg, // 商品的图片
          goods_state: true // 商品的勾选状态
        }
        this.addToCart(goods)
      },
      changeList(e) {
        this.tuiValue = e.value
      },
      addToCartoneClick() {
        this.$emit('numberChange', {
          // 商品的 Id
          id: this.ticketsItem.id,
          // 商品最新的勾选状态
          goods_count: this.tuiValue,
          type: 'plus'
        })
        // 2. 组织一个商品的信息对象
        const goods = {
          id: this.ticketsItem.id, // 商品的Id
          productName: this.ticketsItem.productName, // 商品的名称
          salePrice: this.ticketsItem.salePrice, // 商品的价格
          smarketPrice: this.ticketsItem.smarketPrice, // 商品原价
          goods_count: this.tuiValue,
          productImg: this.ticketsItem.productImg, // 商品的图片
          goods_state: true // 商品的勾选状态
        }
        this.addToCartone(goods)
        this.transShow = false
        this.tuiValue = 1
      },
      // radio 组件的点击事件处理函数
      radioClickHandler() {
        // 通过 this.$emit() 触发外界通过 @ 绑定的 radio-change 事件，
        // 同时把商品的 Id 和 勾选状态 作为参数传递给 radio-change 事件处理函数
        const goods = {
          // 商品的 Id
          id: this.ticketsItem.id,
          // 商品最新的勾选状态
          goods_state: !this.ticketsItem.goods_state
        }
        this.updateGoodsState(goods)
      },
      changeShow(e) {
        e.stopPropagation();
        // console.log(e)
        this.transShow = false
      },
      transShowClick() {
        if (!this.showRadio) {
          this.transShow = true
        }
      },
      popupShow() {
        this.$emit('popupShowItem', {
          title: this.ticketsItem.productName,
          id: this.ticketsItem.id,
          productImg: this.ticketsItem.productImg,
          salePrice: this.ticketsItem.salePrice,
        })
      }
    },
  }
</script>

<style lang="scss">
  .ItemBoxalicen {
    align-items: center;
    padding: 40rpx 42rpx 40rpx 29rpx !important;
    margin-bottom: 0rpx !important;
    border-bottom: 1rpx solid rgba(241, 241, 241, 1);

    .ItemBox_image {
      margin-left: 20rpx;
    }

    .ItemBox_content_top {
      h1 {
        margin-bottom: 62rpx !important;
      }
    }
  }

  .ItemBox {
    // width: 600rpx;
    display: flex;
    padding-left: 20rpx;
    margin-bottom: 50rpx;
    box-sizing: border-box;

    .ItemBox_image {
      margin-right: 20rpx;

      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 20rpx;
      }
    }

    .ItemBox_content {
      width: 100%;

      .ItemBox_content_top {
        h1 {
          margin-bottom: 20rpx;
          font-size: 30rpx;
          font-weight: 600;
          color: rgba(61, 61, 61, 1);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        text {
          line-height: 1.7;
          font-size: 24rpx;
          color: rgba(61, 61, 61, .5);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          margin-bottom: 30rpx;
        }
      }

      .ItemBox_content_bottom {
        // margin-top: 30rpx;
        // margin-bottom: 50rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 30rpx;

        .ItemBox_content_bottom_title {
          display: flex;
          align-items: flex-end;

          h1 {
            font-size: 36rpx;
            color: rgba(61, 61, 61, 1);
            margin-right: 20rpx;
          }

          text {
            font-size: 24rpx;
            color: rgba(61, 61, 61, .3);
            text-decoration: line-through;
            margin-bottom: 5rpx;
          }
        }
      }
    }
  }

  .tui-text {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(61, 61, 61, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;

    .tui-text-box {
      position: relative;
      width: 654rpx;
      // height: 950rpx;
      overflow: hidden;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 30rpx;

      .tui-text-box-swiper {
        height: 386rpx;

        .tui-text-box-Item {
          image {
            width: 100%;
          }
        }
      }

      .tui-text-box-abso {
        position: absolute;
        right: 18rpx;
        top: 36rpx;

        image {
          width: 50rpx;
          height: 50rpx;
          margin-right: 20rpx;
        }
      }

      .tui-text-box-title {
        padding: 41rpx 41rpx 0;

        .tui-text-box-title-h1 {
          color: rgba(61, 61, 61, 1);
          font-size: 34rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .tui-text-box-title-text {
          color: rgba(61, 61, 61, 0.6);
          font-size: 24rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          padding: 25rpx 0 30rpx 0;
        }

        .tui-text-box-title-yi {
          color: rgba(61, 61, 61, 0.7);
          font-size: 24rpx;
          padding-bottom: 50rpx;
          border-bottom: 1rpx solid rgba(235, 235, 235, 1);
        }

        .tui-text-box-title-select {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 36rpx;
        }

        .tui-text-box-title-btn {
          padding: 41rpx 0;

          .tui-text-box-title-btn-box {
            height: 97rpx;
            background-color: rgba(253, 211, 56, 1);
            border-radius: 226rpx;
            color: rgba(61, 61, 61, 1);
            font-size: 36rpx;
            line-height: 97rpx;
            text-align: center;
          }
        }
      }
    }

    .share_Input {
      font-size: 26rpx;
      padding: 0 24rpx;
      line-height: 50rpx;
    }

    .minImage2 {
      position: absolute;
      right: 96rpx;
      top: -38rpx;
      width: 0;
      height: 0;
      overflow: hidden;
      font-size: 0;
      /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
      line-height: 0;
      /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
      border-width: 10px;
      border-style: solid dashed dashed dashed;
      /*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
      border-color: transparent transparent #fff transparent;
    }
  }

  .share_Input {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    button {
      background-color: #fff;
      padding: 0 !important;
      // border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      image {
        width: 110rpx;
        height: 110rpx;
      }

      text {
        font-size: 32rpx;
      }
    }
  }

  .tui-Input {
    position: fixed !important;
    top: 3% !important;
    left: 57% !important;
    width: 40%;
    height: 10%;
    background-color: #fff;
    border-radius: 5rpx;
  }
</style>
